<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view>
      <view class="content">
        <view class="swiper-box">
          <swiper
            class="swiper"
            indicator-dots
            circular
            autoplay
            interval="3000"
            @change="myChange"
          >
            <swiper-item v-for="(item, index) in swipers" :key="index">
              <image
                class="image"
                :src="
                  'https://fsyuncai.oss-cn-beijing.aliyuncs.com' +
                    item.basicImageKey +
                    '?x-oss-process=style/marking_text'
                "
                mode="aspectFit"
              />
            </swiper-item>
          </swiper>
          <view class="swiper-number">
            {{ swipersNumber }}/{{ swipersLength }}
          </view>
        </view>
        <view class="goods-info">
          <view class="goods-info-price">
            <text>￥</text>
            <text>{{ orderInfoData.showProductPrice && orderInfoData.showProductPrice == 1 ? initSalePrice : '*.*' }}</text>
            <text>/ {{ allGoodsUnitName }}</text>
            <!-- <text>￥1200.00</text> -->
          </view>
          <view class="goods-info-name">
            {{ details.brandName }} {{ details.productNameFinal }}
            {{ details.specDetail }}
          </view>
          <view class="goods-info-code">
            <text>商品编码：{{ details.skuNo }}</text>
            <text @click="copyFn(details.skuNo)">复制</text>
          </view>
        </view>
        <view class="goods-standard">
          <text>已选</text>
          <text>{{ details.specDetail }}</text>
          <text>{{ totalNum }}个规格</text>
          <image
            v-if="totalNum > 1"
            src="../static/image/ico_next.png"
            mode="aspectFit"
            @click="maskToggle"
          />
        </view>
        <view class="goods-img">
          <!--          <rich-text class="goods-img" :nodes="detailsImgUrl"></rich-text>-->
          <!-- <u-parse :content="detailsImgUrl"></u-parse> -->
          <mp-html :content="detailsImgUrl" />
        </view>
        <text class="font_family topping icon-Top_tongyong_1" @click="backtop" />
      </view>

      <view v-if="maskShow" class="mask">
        <view class="mask-content">
          <view class="mask-content-close" @click="maskToggle">
            <image
              src="../static/image/icon_goods_snapshot_close.png"
              mode="aspectFit"
            />
          </view>
          <view class="mask-content-title">
            <view class="mask-content-title-img">
              <image
                class="image"
                :src="
                  'https://fsyuncai.oss-cn-beijing.aliyuncs.com' +
                    mainImage +
                    '?x-oss-process=style/marking_text'
                "
                mode="aspectFit"
              />
            </view>
            <view class="mask-content-info">
              <view class="mask-content-info-money">
                <text>￥{{ orderInfoData.showProductPrice && orderInfoData.showProductPrice == 1 ? price : '*.*' }}</text> <text>/ {{ unitName }}</text>
              </view>
              <view>
                {{ specDetail }}
              </view>
              <view class="mask-content-info-number">
                商品编码：{{ skuNo }}
              </view>
            </view>
          </view>
          <scroll-view class="mask-content-box" scroll-y="true" scroll-with-animation="true" style="height: 630rpx;" @scrolltolower="bottomOut">
            <view
              v-for="(item, index) in specificationList"
              :key="index"
              :class="{
                'mask-content-box-list': true,
                'active-class': index === rightIndex,
              }"
              @click="activeClass(index, item)"
            >
              <view class="left">
                <view>{{ item.specDetail }}</view>
                <view>
                  <text>商品编码：{{ item.skuNo }}</text>
                  <text v-if="item.exists" class="left-selected">已选</text>
                </view>
              </view>
              <view class="right">
                <text>￥{{ orderInfoData.showProductPrice && orderInfoData.showProductPrice == 1 ? item.price : '*.*' }}</text>
                <text>/ {{ item.unitName }}</text>
                <!-- <text>￥1200</text> -->
              </view>
            </view>
            <view v-if="showTotal" class="showTotal">没有更多</view>
          </scroll-view>
        </view>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page';
import { snapshopData, snapshopSpecification, orderInfoByOrderNo } from '@/api/snapshootApi.js';
export default {
  components: {
    basePage,
  },
  data() {
    return {
      rightIndex: 0, // 选中的规格样式判断字段
      details: '', // 获取快照接口详情内容
      detailsImgUrl: '', // 图文详情
      mainImage: '', // 主图
      specDetail: '', // 规格名称
      skuNo: '', // 商品编码
      price: '', // 规格商品价格
      unitName: '', // 规格商品单位
      totalNum: '', // 商品规格总数
      orderNo: '', //商品订单号
      orderInfoData: {},
      initSalePrice: '', // 商品价格
      allGoodsUnitName: '', // 全部商品跳转过来的单位
      totalPage: '', // 总页数
      specification: {
        productUuid: '', // spu主键id productUuid 商品快照接口获取  2100047697
        enumTempProduct: '', //商品类型 enumTempProduct 商品详情页传参  0
        enumPriceType: '', // 价格类型  priceType  订单详情页传参  3
        customerNumber: '', // 客户编号  订单详情页传参  02.02.17552
        sendDepartmentId: '', // sendDepartmentId  订单详情页传参  257938
        orderNo: '', // 订单号 商品快照接口获取获取 XS36335536 'enumTempProduct': '0',
        skuNo: '',
        pageShow: 5,
        nowPage: 1
      },
      mySkuNo: '',
      specificationList: [],
      snapshootDataParams: {},
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swipers: [],
      swipersNumber: 1,
      swipersLength: '',
      maskShow: false,
    }
  },
  onLoad(option) {
    console.log('商品传参' + JSON.stringify(option))
    this.specification.enumTempProduct = option.enumTempProduct //商品类型 enumTempProduct 商品详情页传参
    this.specification.orderUnitPrice = option.initSalePrice //全部商品传参 订单价格
    this.orderNo = option.orderNo
    this.initSalePrice = option.initSalePrice
    this.allGoodsUnitName = option.unitName
    this.snapshootDataParams = { 'skuUuid': option.skuUuid, 'enumTempProduct': option.enumTempProduct }
    this.getSnapshootData(this.snapshootDataParams, this.orderNo)
  },
  methods: {
    // 点击复制订单号
    copyFn(val) {
      uni.setClipboardData({
        data: val,
        success: function(res) {
          uni.getClipboardData({
            success: function(res) {
              uni.showToast({
                title: '已复制到剪贴板'
              });
            }
          });
        }
      })
    },
    activeClass(i, item) {
      this.rightIndex = i
      this.specDetail = item.specDetail // 规格名称
      this.skuNo = item.skuNo // 商品编码
      this.price = item.price // 规格商品价格
      this.unitName = item.unitName // 规格商品单位
    },
    myChange(e) {
      this.swipersNumber = e.detail.current + 1
    },
    maskToggle() {
      this.maskShow = !this.maskShow;
    },
    // 点击图片返回顶部
    backtop() {
      uni.pageScrollTo({
        scrollTop: 0
      });
    },
    // 获取商品快照内容
    async getSnapshootData(params, orderNo) {
      const that = this
      await snapshopData(params).then((res) => {
        if (res.errorCode == 0) {
          that.specification.productUuid = res.data.productUuid
          that.specification.orderNo = this.orderNo
          that.specification.skuNo = res.data.skuNo
          this.details = res.data
          this.detailsImgUrl = res.data.spuProductImageDescVo.description.description ? res.data.spuProductImageDescVo.description.description.replace(/\<img/gi, '<img style="max-width:100%; height:auto;"') : res.data.spuProductImageDescVo.description.appdescrition.replace(/\<img/gi, '<img style="max-width:100%; height:auto;"'); // 图文详情
          this.mainImage = res.data.spuProductImageDescVo.mainImage.trimmingKey // 主图
          this.swipers = res.data.spuProductImageDescVo.multiImageList ? res.data.spuProductImageDescVo.multiImageList : [{ 'basicImageKey': this.mainImage }] // 轮播图合集
          this.swipersLength = this.swipers.length // 轮播图个数
          if (!this.mainImage) {
            this.swipersNumber = 0
            this.swipersLength = 0
          }
        } else {
          this.$u.toast(res.msg)
        }
      }).catch(() => { })
      await orderInfoByOrderNo({ 'orderNo': orderNo }).then((res) => {
        if (res.errorCode != 0) {
          return
        }
        this.orderInfoData = res.data
        this.specification.customerNumber = res.data.customerCode
        this.specification.sendDepartmentId = res.data.sendDepartmentId
        if (res.data.priceType == '14202') {
          this.specification.enumPriceType = 1
        } else if (res.data.priceType == '918') {
          this.specification.enumPriceType = 2
        } else if (res.data.priceType == '14201') {
          this.specification.enumPriceType = 3
        } else if (res.data.priceType == '15574') {
          this.specification.enumPriceType = 4
        }
      }).catch((res) => {
      })
      await snapshopSpecification(that.specification).then((res) => {
        if (res.errorCode == 0) {
          this.specificationList = res.data.results
          // this.specificationList = this.specificationList.concat(res.data.results)
          this.specDetail = this.specificationList[0].specDetail // 规格名称
          this.skuNo = this.specificationList[0].skuNo // 商品编码
          this.price = this.specificationList[0].price // 规格商品价格
          this.unitName = this.specificationList[0].unitName // 规格商品单位
          this.totalNum = res.data.totalNum // 规格总数
          this.totalPage = res.data.totalPage // 总页数
        }
      }).catch(() => { })
    },
    //上拉触底函数
    bottomOut() {
      if (this.specification.nowPage >= this.totalPage) {
        this.showTotal = true //已经滑到底的提醒
        return false;
      }
      this.specification.nowPage += 1
      this.getSpecificationData(this.specification)
    },
    // 获取商品规格
    getSpecificationData(value) {
      snapshopSpecification(value).then((res) => {
        if (res.errorCode == 0) { //接口请求成功的处理
          this.specificationList = this.specificationList.concat(res.data.results)
        }
      }).catch(() => { })
    },

  }
}
</script>

<style scoped lang="scss">
.content {
  font-family: PingFangSC-Medium;
  position: relative;
}
.swiper-box {
  position: relative;
}
.swiper-number {
  width: 82rpx;
  height: 44rpx;
  opacity: 0.7;
  background: #999999;
  border-radius: 22rpx;
  position: absolute;
  top: 682rpx;
  left: 648rpx;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  text-align: center;
}
.swiper {
  width: 750rpx;
  height: 750rpx;
}
.image {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.goods-info {
  width: 710rpx;
  height: 214rpx;
  background: #ffffff;
  box-shadow: 0 -4rpx 12rpx 0 rgba(0, 0, 0, 0.1);
  padding: 32rpx 20rpx;
}
.goods-info-price {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  display: flex;
}
.goods-info-price text:nth-child(1) {
  font-weight: 600;
  font-size: 44rpx;
  color: #ff6010;
}
.goods-info-price text:nth-child(2) {
  font-weight: 600;
  font-size: 44rpx;
  color: #ff6010;
}
.goods-info-price text:nth-child(3) {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  margin-left: 4rpx;
}
.goods-info-price text:nth-child(4) {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
  margin-left: 20rpx;
}
.goods-info-name {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
  /* height: 92rpx; */
  font-weight: 600;
  font-size: 28rpx;
}
.goods-info-code {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  display: flex;
}
.goods-info-code text:nth-child(1) {
  width: 600rpx;
}
.goods-info-code text:nth-child(2) {
  color: #ffa200;
  margin-left: 40rpx;
}
.goods-standard {
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  display: flex;
  margin-top: 20rpx;
}
.goods-standard text:nth-child(1) {
  width: 126rpx;
  height: 120rpx;
  text-align: center;
  line-height: 120rpx;
  border-right: 1rpx solid #ededed;
  font-weight: 600;
  font-size: 28rpx;
}
.goods-standard text:nth-child(2) {
  width: 364rpx;
  height: 120rpx;
  padding-left: 26rpx;
  line-height: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goods-standard text:nth-child(3) {
  height: 120rpx;
  width: 170rpx;
  line-height: 120rpx;
  text-align: right;
}
.goods-standard image {
  width: 28rpx;
  height: 28rpx;
  margin-top: 48rpx;
  margin-left: 6rpx;
  background-size: 28rpx 28rpx;
}
.goods-img {
  width: 100%;
  height: 536rpx;
  margin-top: 20rpx;
  background: #ffffff;
  margin-bottom: 68rpx;
}
.goods-img image {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.mask {
  width: 100%;
  height: 1624rpx;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0px;
}
.mask-content {
  width: 100%;
  height: 856rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0 0;
  position: fixed;
  bottom: 0px;
  padding-bottom: 10rpx;
}
.mask-content-close {
  position: relative;
  height: 1rpx;
}
.mask-content-close image {
  position: absolute;
  left: 684rpx;
  width: 48rpx;
  height: 48rpx;
  background-size: 48rpx 48rpx;
  margin-top: 16rpx;
}
.mask-content-title {
  width: 660rpx;
  height: 160rpx;
  margin-top: 32rpx;
  margin-left: 32rpx;
  margin-bottom: 18rpx;
  display: flex;
}
.mask-content-title-img {
  width: 160rpx;
  height: 160rpx;
}
.mask-content-info {
  margin-left: 32rpx;
  margin-top: 18rpx;
}
.mask-content-info view {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
}
.mask-content-info-money {
  display: flex;
}
.mask-content-info-money text:nth-child(1) {
  font-weight: 600;
  font-size: 48rpx;
  color: #ffa200;
  margin-right: 10rpx;
}
.mask-content-info-money text:nth-child(2) {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  height: 66rpx;
  line-height: 66rpx;
}
.mask-content-info-number {
  margin-top: 10rpx;
}
.mask-content-box {
  border-top: 1rpx solid #9999991f;
  height: 688rpx;
}
.active-class {
  background-color: #ffeae2;
}
.mask-content-box-list {
  width: 100%;
  height: 132rpx;
  box-sizing: border-box;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  font-weight: 400;
  font-size: 28rpx;
  border-bottom: 1rpx solid #9999991f;
}
.left view:nth-child(2) {
  font-size: 24rpx;
  color: #999999;
  margin-top: 24rpx;
}
.left-selected {
  color: #ffa200;
  margin-left: 20rpx;
}
.right {
  color: #999999;
}
.right text:nth-child(1) {
  color: #ff6010;
  margin-right: 10rpx;
}
.right text:nth-child(3) {
  text-decoration: line-through;
  margin-left: 10rpx;
}
.topping{
  width: 70rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  position: fixed;
  font-size: 48rpx;
  top: calc(100vh - 250rpx);
  right: 30rpx;
  z-index: 99;
  overflow: hidden;
  box-shadow:0 0 10rpx 4rpx rgba(0,0,0,0.2);
  color: $uni-text-color;
  background: $uni-bg-color;
  border-radius: $uni-border-radius-circle;
}
.showTotal {
  text-align: center;
  margin: 10rpx;
  height: 30rpx;
}
</style>
